<!-- 楼层信息 -->
<template>
  <div class="floorInfo-container">
    <Loading v-if="props.Loading"></Loading>
    <div class="floor" v-else>
      <p class="title" >楼层保洁员</p>
      <div v-if="props.floor.Cleaning">
        <div class="avatar">
          <Avatar :url="props.floor.Cleaning.avatar" :size="60"></Avatar>
        </div>
        <div class="basicInfo">
          <p class="name">保洁员: {{ props.floor.Cleaning.cleaningName }}</p>
          <p class="adminId">工号: {{ props.floor.Cleaning.cleaningNumber }}</p>
        </div>
      </div>
      <div v-else class="unavailable">
        暂无
      </div>
      <p class="title">楼层信息</p>
        <div class="other">
            <p class="capacity"><span>可住人数</span>: {{ props.floor.floorCapacity }}人</p>
            <p class="resided"><span>以住人数</span>: {{ props.floor.floorResided }}人</p>
            <p class="floorNum"><span>楼层</span>: {{ props.floor.floorNumber }}</p>
        </div>
    </div>
  </div>
</template>

<script setup>
import Loading from "@/components/Loading/index.vue"
import Avatar from "@/components/Avatar/index.vue"
const props = defineProps({
  floor: {
    type: Object,
    required: true,
  },
  Loading:{
    type:Boolean,
    default:false
  }
});
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.floorInfo-container{
    width: 100%;
    height: 100%;
    .floor{
        p{
            color: @gray;
            margin: 5px 0;
        }
        .title{
            text-align: center;
            font-size: 24px;
            margin-bottom: 10px;
        }
        .avatar{
            margin-bottom:10px;
            .avatar-container{
                margin: 0 auto;
            }
        }
        .basicInfo{
            display: flex;
            justify-content: space-around;
            
        }
        .other{
            padding: 0 5px;
            span{
                display: inline-block;
                width: 80px;
                text-align-last: justify;
            }
        }
    }
}
.unavailable{
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 1em;
  color: @gray;
}
</style>